<template>
  <!-- 未完成：推荐榜单显示 -->
  <div v-wechat-title="'Reading Site 首页'">
    <bookshelf />
    <login></login>
    
    <el-container>
      <el-header id="search">
        <!-- 搜索栏，组件里设置的绝对位置，所以可以放任何位置，可以考虑写到这个外边的组件 -->
        <innerSearch></innerSearch>
        <search></search>
      </el-header>
      
      <el-main id="classify">
        <!-- 显示分类 -->
        
      </el-main>
      
      <el-footer>
        <!-- 显示排行榜 -->
        <Suspense>
          <template #default>
            <ranking-lists></ranking-lists>
          </template>
          <template #fallback>
            <div id="loading" v-loading="true" element-loading-text="拼命加载中"></div>
          </template>
        </Suspense>
      </el-footer>
    </el-container>
  </div>
  <!-- 如果注册框 可见，传入 注册框 state，如果不是，默认传入登录 state：如果登录框 state.visible = false ,也是不会显示的 -->

</template>

<script>
import innerSearch from "@c/InnerSearch.vue"
import search from "@c/Search.vue"
import { ref, reactive, defineComponent } from "vue"
import RankingLists from "@c/ranking/RankingLists.vue"
import Login from "@c/navBar/Login.vue"
import Bookshelf from "@c/navBar/Bookshelf.vue"

export default defineComponent ({
  name: "Home",
  components: {
    search,
    innerSearch,
    RankingLists,
    Login,
    Bookshelf,
  },
  setup () {

  }

})

</script>

<style lang="scss" scoped>
#search {
  height: 557 px;
  /* height: 51 vh; */
}

.el-footer {
  position: absolute;
  top: 400px;
}

.myShelf {
  position: absolute;
  right: 100px;
  top: 20px;
  cursor: pointer;
}

#loading {
  width: 100px;
  position: absolute;
  bottom: 50px;
  left: 600px;
}
</style>
